<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/reset.css"/>
    <script src="lib/testHelper.js"></script>
    <script src="tooltipTestHelper.js"></script>
</head>
<body>
<style>
    h1 {
        line-height: 60px;
        height: 60px;
        background: #a60;
        text-align: center;
        font-weight: bold;
        color: #eee;
        font-size: 14px;
    }

    .chart {
        height: 350px;
    }
</style>


<h1>time axis default | data zoom | animation auto: zoom in has animation, zoom out no animation</h1>
<div class="chart" id="time-animation"></div>
<h1>category axis default | data zoom | animation auto: zoom in has animation, zoom out no animation</h1>
<div class="chart" id="category-animation"></div>
<h1>time axis cross | x snap | label show | tooltip show</h1>
<div class="chart" id="time-cross"></div>
<h1>axis label too long | x axis label rotate | label should not overflow ec container</h1>
<div class="chart" id="label-rotate"></div>
<h1>two value axes | snap | grid.tooltip setting | snap has animation </h1>
<div class="chart" id="two-value-axes"></div>
<h1>label style and formatter</h1>
<div class="chart" id="label-style"></div>
<h1>dual yAxes | label color auto : the same as axisline</h1>
<div class="chart" id="dual-yAxes"></div>
<h1>dual xAxes | label color auto : the same as axisline</h1>
<div class="chart" id="dual-xAxes"></div>
<h1>y is category</h1>
<div class="chart" id="y-is-category"></div>
<h1>value axis as base | y axis should not trigger tooltip | tooltip.trigger: 'none' so item tooltip will not be
    triggered</h1>
<div class="chart" id="value-axis-as-base"></div>
<h1>polar category</h1>
<div class="chart" id="polar-category"></div>
<h1>multiple points with the same axis value | when not snap tooltip should be correct</h1>
<div class="chart" id="same-value"></div>
<h1>no tooltip</h1>
<div class="chart" id="no-tooltip"></div>
<h1>axisPointer.type: 'none', but label.show: true</h1>
<div class="chart" id="none"></div>
<h1>tooltip.axisPointer.label.show: fasle</h1>
<div class="chart" id="tooltip.axisPointer.label.show: fasle"></div>


<script>

    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoom',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            dataZoom: [{
                type: 'inside'
            }, {
                type: 'slider'
            }]
        };
        var baseTop = 90;
        var height = 250;
        var gap = 30;
        makeTimeGrid(option, {
            grid: {left: 100, top: baseTop, height: height}
        });
        baseTop += height + gap;

        createChart('time-animation', echarts, option, baseTop + 40);
    })

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/chart/line',
        // 'echarts/chart/bar',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoom',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            dataZoom: [{
                type: 'inside',
                start: 40,
                end: 60
            }, {
                type: 'slider',
                start: 40,
                end: 60
            }]
        };
        var baseTop = 90;
        var height = 250;
        var gap = 30;
        makeCategoryGrid(option, {
            grid: {left: 100, top: baseTop, height: height},
            xAxis: {boundaryGap: true}
        }, false, 100, 'bar');
        baseTop += height + gap;

        createChart('category-animation', echarts, option, baseTop + 40);
    })

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'cross'}
            }
        };
        var baseTop = 90;
        var height = 250;
        var gap = 50;
        makeTimeGrid(option, {
            grid: {left: 100, top: baseTop, height: height},
            yAxis: {
                axisTick: {
                    inside: true
                },
                axisLabel: {
                    inside: true
                }
            }
        });
        baseTop += height + gap;

        createChart('time-cross', echarts, option, baseTop + 100);
    })

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'cross'}
            }
        };
        var baseTop = 90;
        makeCategoryGrid(option, {
            grid: {
                containLabel: true, left: 5, right: 10, top: baseTop, height: 140
            },
            xAxis: {
                axisLabel: {
                    rotate: 30,
                    formatter: function (value) {
                        return echarts.format.truncateText(value, 50);
                    }
                }
            }
        }, null, null, null, 'toolonglonglonglonglonglonglong');

        createChart('label-rotate', echarts, option, baseTop + 200);
    })

</script>


<script>
    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'none'
            }
        };
        var baseTop = 90;
        var height = 250;
        var gap = 50;
        makeValueGrid(option, {
            grid: {
                top: baseTop, height: height,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                }
            },
            yAxis: {name: 'tooltip.trigger: "axis"\nso base axis snap and animate by default'}
        }, true);
        baseTop += height + gap;
        makeValueGrid(option, {
            grid: {
                top: baseTop, height: height
            },
            xAxis: {
                axisPointer: {
                    show: true,
                    snap: true,
                    triggerTooltip: true
                }
            },
            yAxis: {
                name: 'both axes snap\nand so animate by default',
                axisPointer: {
                    show: true,
                    snap: true,
                    triggerTooltip: true
                }
            }
        }, true);
        baseTop += height + gap;

        var dom = document.getElementById('two-value-axes');
        if (dom) {
            dom.style.height = baseTop + 'px';
            var chart = echarts.init(dom);
            chart.setOption(option);
        }
    })

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            axisPointer: {
                label: {
                    backgroundColor: 'blue',
                    borderColor: 'green',
                    borderRadius: 5,
                    borderWidth: 2,
                    shadowBlur: 6,
                    shadowOffsetX: 3,
                    shadowOffsetY: 3,
                    shadowColor: '#000'
                }
            }
        };
        var baseTop = 90;
        var height = 150;
        var gap = 50;
        makeCategoryGrid(option, {
            grid: {top: baseTop, height: height},
            xAxis: {
                axisPointer: {show: true}
            },
            yAxis: {name: 'global style: \nbg: "blue", border: "green", shadow, borderRadius'}
        });
        baseTop += height + gap;
        makeCategoryGrid(option, {
            grid: {top: baseTop, height: height},
            xAxis: {
                axisPointer: {
                    show: true,
                    label: {
                        backgroundColor: 'red',
                        borderWidth: 0
                    }
                }
            },
            yAxis: {name: 'xAxis style: \nbg: "red", borderWidth: 0'}
        });
        baseTop += height + gap;
        makeCategoryGrid(option, {
            grid: {
                top: baseTop,
                height: height
            },
            xAxis: {
                position: 'top',
                axisPointer: {
                    show: true,
                    label: {
                        show: true,
                        formatter: '类别 {value} %'
                    }
                }
            },
            yAxis: {name: 'axisLabel formatter string'}
        });
        baseTop += height + gap;
        makeCategoryGrid(option, {
            grid: {
                top: baseTop,
                height: height
            },
            xAxis: {
                axisPointer: {
                    show: true,
                    label: {
                        show: true,
                        formatter: function (params) {
                            return 'x: ' + params.value + '\n'
                                + echarts.util.map(params.seriesData, function (item) {
                                    return item.name + ': ' + item.value;
                                }).join('\n')
                        }
                    }
                }
            },
            yAxis: {name: 'axisLabel formatter function'}
        });
        baseTop += height + gap + 20;

        var dom = document.getElementById('label-style');
        if (dom) {
            dom.style.height = baseTop + 'px';
            var chart = echarts.init(dom);
            chart.setOption(option);
        }
    })
</script>


<script>
    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        formatter: function (params) {
                            console.log(params);
                            return 'asdfa';
                        }
                    }
                }
            }
        };
        makeCategoryCartesian(option, {}, 0, 0);
        makeCategoryCartesian(option, {}, 0, 1, 17);
        makeCategoryCartesian(option, {
            yAxis: {
                offset: 50
            }
        }, 0, 2, 117);
        makeCategoryCartesian(option, {
            yAxis: {
                position: 'left',
                offset: 50
            }
        }, 0, 3, 1117);

        var dom = document.getElementById('dual-yAxes');
        if (dom) {
            var chart = echarts.init(dom);
            chart.setOption(option);
        }
    })

</script>


<script>
    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            }
        };
        makeCategoryCartesian(option, {
            xAxis: {
                axisPointer: {
                    type: 'shadow'
                }
            }
        }, 0, 0);
        makeCategoryCartesian(option, {
            xAxis: {
                axisPointer: {
                    type: 'shadow'
                }
            }
        }, 1, 0, 17, 'last');

        var dom = document.getElementById('dual-xAxes');
        if (dom) {
            var chart = echarts.init(dom);
            chart.setOption(option);
        }
    })

</script>


<script>
    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis'
            }
        };
        var baseTop = 90;
        var height = 150;
        var gap = 50;
        makeCategoryGrid(option, {
            grid: {top: baseTop, height: height},
            xAxis: {
                axisPointer: {
                    show: true,
                    triggerTooltip: false
                }
            }
        }, true);
        baseTop += height + gap;

        var dom = document.getElementById('y-is-category');
        if (dom) {
            var chart = echarts.init(dom);
            chart.setOption(option);
        }
    })

</script>


<script>
    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'none'
            }
        };
        var baseTop = 90;
        var height = 150;
        var gap = 50;
        makeCategoryGrid(option, {
            grid: {top: baseTop, height: height},
            xAxis: {
                axisPointer: {
                    show: true
                }
            },
            yAxis: {
                axisPointer: {
                    show: true,
                    triggerTooltip: false,
                    animation: true
                }
            }
        }, true);
        baseTop += height + gap;

        var dom = document.getElementById('value-axis-as-base');
        if (dom) {
            var chart = echarts.init(dom);
            chart.setOption(option);
        }
    })

</script>


<script>
    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/polar',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'cross'}
            }
        };
        var baseTop = 90;
        var height = 250;
        var gap = 50;
        makeCategoryPolar(option, {
            polar: {
                center: ['25%', baseTop + height / 2],
                radius: 120
            }
        }, true);
        makeCategoryPolar(option, {
            polar: {
                center: ['75%', baseTop + height / 2],
                radius: 120
            },
            angleAxis: {
                axisPointer: {
                    type: 'shadow'
                }
            }
        }, true);
        baseTop += height + gap;
        makeCategoryPolar(option, {
            polar: {
                center: ['25%', baseTop + height / 2],
                radius: 120
            }
        });
        makeCategoryPolar(option, {
            polar: {
                center: ['75%', baseTop + height / 2],
                radius: 120
            },
            radiusAxis: {
                axisPointer: {
                    type: 'shadow'
                }
            }
        });
        baseTop += height + gap;

        createChart('polar-category', echarts, option, baseTop);
    })

</script>


<script>
    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            xAxis: [{
                nameLocation: 'middle',
                nameGap: 30,
                name: 'snap: show display both value'
            }, {
                gridIndex: 1,
                nameLocation: 'middle',
                nameGap: 30,
                name: 'not snap: put axis on the middle of the two points, should display only one value.'
            }, {
                gridIndex: 2,
                nameLocation: 'middle',
                nameGap: 30,
                name: 'step line not snap: should tooltip correct.',
                axisPointer: {
                    snap: false
                }
            }],
            yAxis: [{}, {gridIndex: 1}, {gridIndex: 2}],
            grid: [{
                top: 10,
                height: 100
            }, {
                top: 200,
                height: 100
            }, {
                top: 400,
                height: 200
            }],
            series: [{
                type: 'line',
                data: [[10, 10], [10, 20], [20, 20]]
            }, {
                type: 'line',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: [[10, 10], [30, 10]]
            }, {
                xAxisIndex: 2,
                yAxisIndex: 2,
                name: 'Step Start',
                type: 'line',
                step: 'start',
                data: echarts.util.map([120, 132, 101, 134, 90, 230, 210], function (value, index) {
                    return [index * 100, value];
                })
            }, {
                xAxisIndex: 2,
                yAxisIndex: 2,
                name: 'Step Middle',
                type: 'line',
                step: 'middle',
                data: echarts.util.map([220, 282, 201, 234, 290, 430, 410], function (value, index) {
                    return [index * 100, value];
                })
            }, {
                xAxisIndex: 2,
                yAxisIndex: 2,
                name: 'Step End',
                type: 'line',
                step: 'end',
                data: echarts.util.map([450, 432, 401, 454, 590, 530, 510], function (value, index) {
                    return [index * 100, value];
                })
            }]
        };

        createChart('same-value', echarts, option, 700);
    })

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {};
        var baseTop = 90;
        var height = 150;
        var gap = 50;
        makeCategoryGrid(option, {
            grid: {top: baseTop, height: height},
            yAxis: {name: 'axisPointer: not show by default'}
        });
        baseTop += height + gap;
        makeCategoryGrid(option, {
            grid: {top: baseTop, height: height},
            xAxis: {axisPointer: {show: true}},
            yAxis: {name: 'axisPointer: show if specified'}
        });
        baseTop += height + gap;

        var dom = document.getElementById('no-tooltip');
        if (dom) {
            dom.style.height = baseTop + 'px';
            var chart = echarts.init(dom);
            chart.setOption(option);
        }
    })

</script>


<script>
    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/chart/themeRiver',
        // 'echarts/component/legend',
        // 'echarts/component/polar',
        // 'echarts/component/tooltip',
        // 'echarts/component/singleAxis',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'none', label: {show: true}}
            }
        };
        var baseTop = 90;
        var height = 250;
        var gap = 50;
        makeCategoryPolar(option, {
            polar: {
                center: ['25%', baseTop + height / 2],
                radius: 120
            }
        }, true);
        makeCategoryGrid(option, {
            grid: {left: '50%', top: baseTop, height: height},
            xAxis: {boundaryGap: true}
        }, false, 100, 'bar');
        baseTop += height + gap;

        option.singleAxis = {
            axisTick: {},
            axisLabel: {},
            top: baseTop,
            height: height,
            bottom: 10,
            type: 'time'
        };
        option.series.push({
            type: 'themeRiver',
            itemStyle: {
                emphasis: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.8)'
                }
            },
            data: [['2015/11/08', 10, 'DQ'], ['2015/11/09', 15, 'DQ'], ['2015/11/10', 35, 'DQ'],
                // ['2015/11/11',38,'DQ'],['2015/11/12',22,'DQ'],['2015/11/13',16,'DQ'],
                ['2015/11/14', 7, 'DQ'], ['2015/11/15', 2, 'DQ'], ['2015/11/16', 17, 'DQ'],
                ['2015/11/17', 33, 'DQ'], ['2015/11/18', 40, 'DQ'], ['2015/11/19', 32, 'DQ'],
                ['2015/11/20', 26, 'DQ'], ['2015/11/21', 35, 'DQ'], ['2015/11/22', 40, 'DQ'],
                ['2015/11/23', 32, 'DQ'], ['2015/11/24', 26, 'DQ'], ['2015/11/25', 22, 'DQ'],
                // ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],
                ['2015/11/08', 35, 'TY'], ['2015/11/09', 36, 'TY'], ['2015/11/10', 37, 'TY'],
                ['2015/11/11', 22, 'TY'], ['2015/11/12', 24, 'TY'], ['2015/11/13', 26, 'TY'],
                ['2015/11/14', 34, 'TY'], ['2015/11/15', 21, 'TY'], ['2015/11/16', 18, 'TY'],
                ['2015/11/17', 45, 'TY'], ['2015/11/18', 32, 'TY'], ['2015/11/19', 35, 'TY'],
                ['2015/11/20', 30, 'TY'], ['2015/11/21', 28, 'TY'], ['2015/11/22', 27, 'TY'],
                ['2015/11/23', 26, 'TY'], ['2015/11/24', 15, 'TY'], ['2015/11/25', 30, 'TY'],
                ['2015/11/26', 35, 'TY'], ['2015/11/27', 42, 'TY'], ['2015/11/28', 42, 'TY'],
                ['2015/11/08', 21, 'SS'], ['2015/11/09', 25, 'SS'], ['2015/11/10', 27, 'SS'],
                ['2015/11/11', 23, 'SS'], ['2015/11/12', 24, 'SS'], ['2015/11/13', 21, 'SS'],
                ['2015/11/14', 35, 'SS'], ['2015/11/15', 39, 'SS'], ['2015/11/16', 40, 'SS'],
                ['2015/11/17', 36, 'SS'], ['2015/11/18', 33, 'SS'], ['2015/11/19', 43, 'SS'],
                ['2015/11/20', 40, 'SS'], ['2015/11/21', 34, 'SS'], ['2015/11/22', 28, 'SS'],
                // ['2015/11/23',26,'SS'],['2015/11/24',37,'SS'],['2015/11/25',41,'SS'],
                // ['2015/11/26',46,'SS'],['2015/11/27',47,'SS'],['2015/11/28',41,'SS'],
                // ['2015/11/08',10,'QG'],['2015/11/09',15,'QG'],['2015/11/10',35,'QG'],
                // ['2015/11/11',38,'QG'],['2015/11/12',22,'QG'],['2015/11/13',16,'QG'],
                ['2015/11/14', 7, 'QG'], ['2015/11/15', 2, 'QG'], ['2015/11/16', 17, 'QG'],
                ['2015/11/17', 33, 'QG'], ['2015/11/18', 40, 'QG'], ['2015/11/19', 32, 'QG'],
                ['2015/11/20', 26, 'QG'], ['2015/11/21', 35, 'QG'], ['2015/11/22', 40, 'QG'],
                ['2015/11/23', 32, 'QG'], ['2015/11/24', 26, 'QG'], ['2015/11/25', 22, 'QG'],
                ['2015/11/26', 16, 'QG'], ['2015/11/27', 22, 'QG'], ['2015/11/28', 10, 'QG'],
                ['2015/11/08', 10, 'SY'], ['2015/11/09', 15, 'SY'], ['2015/11/10', 35, 'SY'],
                ['2015/11/11', 38, 'SY'], ['2015/11/12', 22, 'SY'], ['2015/11/13', 16, 'SY'],
                ['2015/11/14', 7, 'SY'], ['2015/11/15', 2, 'SY'], ['2015/11/16', 17, 'SY'],
                ['2015/11/17', 33, 'SY'], ['2015/11/18', 40, 'SY'], ['2015/11/19', 32, 'SY'],
                ['2015/11/20', 26, 'SY'], ['2015/11/21', 35, 'SY'], ['2015/11/22', 4, 'SY'],
                ['2015/11/23', 32, 'SY'], ['2015/11/24', 26, 'SY'], ['2015/11/25', 22, 'SY'],
                ['2015/11/26', 16, 'SY'], ['2015/11/27', 22, 'SY'], ['2015/11/28', 10, 'SY'],
                ['2015/11/08', 10, 'DD'], ['2015/11/09', 15, 'DD'], ['2015/11/10', 35, 'DD'],
                ['2015/11/11', 38, 'DD'], ['2015/11/12', 22, 'DD'], ['2015/11/13', 16, 'DD'],
                ['2015/11/14', 7, 'DD'], ['2015/11/15', 2, 'DD'], ['2015/11/16', 17, 'DD'],
                ['2015/11/17', 33, 'DD'], ['2015/11/18', 4, 'DD'], ['2015/11/19', 32, 'DD'],
                ['2015/11/20', 26, 'DD'], ['2015/11/21', 35, 'DD'], ['2015/11/22', 40, 'DD'],
                ['2015/11/23', 32, 'DD'], ['2015/11/24', 26, 'DD'], ['2015/11/25', 22, 'DD'],
                ['2015/11/26', 16, 'DD'], ['2015/11/27', 22, 'DD'], ['2015/11/28', 10, 'DD']]
        });
        baseTop += height + gap;

        createChart('none', echarts, option, baseTop);
    })

</script>


<script>
    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/chart/themeRiver',
        // 'echarts/component/legend',
        // 'echarts/component/polar',
        // 'echarts/component/tooltip',
        // 'echarts/component/singleAxis',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        show: false
                    }
                }
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: {
                type: 'scatter',
                data: [
                    ['2015/11/08', 10, 'DQ'], ['2015/11/09', 15, 'DQ'], ['2015/11/10', 35, 'DQ'],
                    ['2015/11/14', 7, 'DQ'], ['2015/11/15', 2, 'DQ'], ['2015/11/16', 17, 'DQ'],
                    ['2015/11/17', 33, 'DQ'], ['2015/11/18', 40, 'DQ'], ['2015/11/19', 32, 'DQ'],
                    ['2015/11/20', 26, 'DQ'], ['2015/11/21', 35, 'DQ'], ['2015/11/22', 40, 'DQ'],
                    ['2015/11/23', 32, 'DQ'], ['2015/11/24', 26, 'DQ'], ['2015/11/25', 22, 'DQ'],
                    // ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],
                    ['2015/11/08', 35, 'TY'], ['2015/11/09', 36, 'TY'], ['2015/11/10', 37, 'TY'],
                    ['2015/11/11', 22, 'TY'], ['2015/11/12', 24, 'TY'], ['2015/11/13', 26, 'TY'],
                    ['2015/11/14', 34, 'TY'], ['2015/11/15', 21, 'TY'], ['2015/11/16', 18, 'TY'],
                    ['2015/11/17', 45, 'TY'], ['2015/11/18', 32, 'TY'], ['2015/11/19', 35, 'TY'],
                    ['2015/11/20', 30, 'TY'], ['2015/11/21', 28, 'TY'], ['2015/11/22', 27, 'TY']
                ]
            }
        };

        createChart('tooltip.axisPointer.label.show: fasle', echarts, option);
    })

</script>


</body>
</html>
